<template>
  <div class="dy-main FundationIndex">
    <div class="dy-header">
      <x-header title="基金" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <div class="tabs">
        <tab bar-active-color="transparent" active-color="#668599" backdround-color="transparent">
          <tab-item v-for="(item,index) in tabArray" :key="index">{{item}}</tab-item>
        </tab>
        <div class="screenImg" @click="showFilterClick"><img class="imgUrl" src="../../../assets/img/Financial/shaixuan.png"></div>
      </div>
      <div class="navigationBar">
        <div class="sort" @click="changeShowTop()">
          <div>综合排序</div>
          <div class="graph">
            <div class="topTriangle"></div>
            <div class="topWhiteTriangle" v-show="showtop"></div>
            <div class="bottomTriangle"></div>
            <div class="bottomWhiteTriangle" v-show="!showtop"></div>
          </div>
        </div>
        <div class="msg">起购金额</div>
        <div class="msg">收益率</div>

        <popup v-model="showFilter" position="right" width="100%" style="width: 100%; padding:0; z-index: 20000">
          <div class="filterPage">
            <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="unshowFilterClick">筛选</x-header>
            <div class="fliterOption" v-for="(filterList, Findex) in filterLists" :key="Findex">
              <div class="types">{{ filterList.types }}</div>
              <div class="optionList" :class="{checked: optionList.selected === 1}" v-for="(optionList, Oindex) in filterList.optionLists" :key="Oindex" @click="checkedOption(Findex, Oindex, optionList.option, $event)">
                {{ optionList.option }}
              </div>
            </div>
            <div class="buttonGroup">
              <div class="button cancle" @click="clearCheck">清除所选</div>
              <div class="button confirm" @click="sendData">确认</div>
            </div>
          </div>
        </popup>
      </div>
      <scroller lock-x scrollbar-y use-pullup :pullup-config="{ content: '上拉加载更多', downContent: '松开进行加载', upContent: '上拉加载更多', loadingContent: '加载中...' }" height="100%" ref="demo3" @on-pullup-loading="getMore" >
      <ul class="list-detail">
        <li>
          <div>
            <p>最新净值</p>
            <p>15.8600</p>
          </div>
          <div>
            <p>1000元起购</p>
            <p>汇添富医药保健混合</p>
          </div>
          <div>
            <p>4级-高风险</p>
          </div>
        </li>
        <li>
          <div>
            <p>最新净值</p>
            <p>15.8600</p>
          </div>
          <div>
            <p>1000元起购</p>
            <p>汇添富医药保健混合</p>
          </div>
          <div>
            <p>4级-高风险</p>
          </div>
        </li>
      </ul>
      </scroller>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      showtop: true, // 控制筛选上下按钮指示
      showFilter: false, // 操控筛选框的显隐
      tabArray: ['全部', '指数型', '贷币型', '股票型', '债券型', '保险'], // 筛选导航
      filterLists: [],
      items: [{
        types: '币种',
        optionLists: [{
          option: '人民币',
          selected: 0
        }, {
          option: '美元',
          selected: 0
        }, {
          option: '港币',
          selected: 0
        }, {
          option: '欧元',
          selected: 0
        }]
      }, {
        types: '收益率区间',
        optionLists: [{
          option: '低于4%',
          selected: 0
        }, {
          option: '4%~5%',
          selected: 0
        }, {
          option: '5%以上',
          selected: 0
        }]
      }]
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    getMore () {
    },
    sendData () {
      console.log(this.checkedOptions)
      this.showFilter = false
    },
    unshowFilterClick () {
      this.showFilter = false
      this.clearCheck()
    },
    changeShowTop () {
      this.showtop = !this.showtop
    },
    showFilterClick () {
      this.showFilter = true
      this.filterLists = this.items
    },
    checkedOption (i, j, option, e) {
      if (this.filterLists[i].optionLists[j].selected === 1) {
        this.filterLists[i].optionLists[j].selected = 0
      } else {
        this.filterLists[i].optionLists[j].selected = 1
      }

      let n = this.checkedOptions.indexOf(option)
      if (n !== -1) {
        this.checkedOptions.splice(n, 1)
      } else {
        this.checkedOptions.push(option)
      }
      console.log(this.checkedOptions)
    },
    clearCheck () {
      let L1 = this.filterLists.length
      for (let i = 0; i < L1; i++) {
        let L2 = this.filterLists[i].optionLists.length
        for (let j = 0; j < L2; j++) {
          this.filterLists[i].optionLists[j].selected = 0
        }
      }
      this.checkedOptions = []
    }
  },
  created () {
    this.status = this.$route.query.status
  }
}
</script>
<style lang="less">
.FundationIndex{
    .tabs{
      position: relative;
      width: 100%;
      .vux-tab .vux-tab-item {
              background: none;
              color: #9B9B9B;
            }
      .screenImg{
        position:absolute;
        top: 0;
        right: 0;
        width: 10%;
        padding: 0;
        padding-top: 0.15rem;
        background: #fff;
        .imgUrl{
          height: 0.5rem;
          width: 0.5rem;
        }
      }
    }
    .navigationBar{
      background: #EDEDED;
      height: 0.8rem;
      display: flex;
      justify-content:space-around;
      &>div{
        padding: 0.2rem 0.3rem;
      }
      .sort{
        display: flex;
        /*padding: 0.2rem 0.3rem;*/
        .graph{
          padding-left: 0.1rem;
          position: relative;
          .topTriangle{
            height: 0;
            width: 0;
            border-top: 0.11rem solid transparent;
            border-right: 0.11rem solid transparent;
            border-bottom: 0.11rem solid #999999;
            border-left: 0.11rem solid transparent;
            position: relative;
            top: -0.03rem;
          }
          .topWhiteTriangle{
            height: 0;
            width: 0;
            border-top: 0.07rem solid transparent;
            border-right: 0.07rem solid transparent;
            border-bottom: 0.07rem solid #fff;
            border-left: 0.07rem solid transparent;
            position: absolute;
            top: 0.04rem;
            left: 0.14rem;
          }
          .bottomTriangle{
            height: 0;
            width: 0;
            border-top: 0.11rem solid #999999;
            border-right: 0.11rem solid transparent;
            border-bottom: 0.11rem solid transparent;
            border-left: 0.11rem solid transparent;
          }
          .bottomWhiteTriangle{
            height: 0;
            width: 0;
            border-top: 0.07rem solid #fff;
            border-right: 0.07rem solid transparent;
            border-bottom: 0.07rem solid transparent;
            border-left: 0.07rem solid transparent;
            position: absolute;
            top: 0.21rem;
            left: 0.14rem;
          }
        }
      }
      .filterPage{
        height: 100%;
        width: 100%;
        background: #fff;
        .fliterOption{
          display: flex;
          flex-wrap: wrap;
          .types{
            width: 100%;
            padding: 0.3rem;
            font-weight: bolder;
            font-size: 0.36rem;
          }
          .optionList{
            font-size: 0.24rem;
            padding: 0.1rem 0.3rem;
            border-radius: 0.06rem;
            border: 1px solid;
            margin-left: 0.3rem;
            background: #F7F8FA;
          }
          .checked{
            background: #999999;
          }
        }
        .buttonGroup{
          display: flex;
          margin-top: 0.5rem;
          >div{
            font-size: 0.34rem;
            background: blue;
            border-radius: 0.06rem;
            color: #fff;
            height: 0.8rem;
            width: 2.5rem;
            line-height: 0.8rem;
            text-align: center;
          }
          .cancle{
            margin: 0 0.8rem;
          }
        }
      }
    }
  .list-detail{
    width: 100%;
    &>li{
      display: flex;
      width: 100%;
      border-bottom: 1px solid #eee;
      background: #fff;
      padding-top: .2rem;
      &>div{
        display: flex;
        text-align: center;
        flex-grow: 1;
        flex-direction:column-reverse;
        p{
          padding-bottom: .1rem;
        }
      }
    }
  }
}
</style>
